<script setup lang="ts">
import { NSpace, NH1 } from "naive-ui";
import { useConfigStore } from "@/plugins/store";
import AnimationTrans from "ys-ts/src/vue/AnimationTrans.vue";
import { NoFocusButton } from "ys-ts/src/naive-ui/button";
import { useRouter } from "ys-ts/src/naive-ui/router";
import { useRouterName } from "@/plugins/router";

const store = useConfigStore();

const { toName } = useRouter();
const { home, second1, second2 } = useRouterName();
</script>

<template>
  <NSpace class="tw-h-screen" justify="center" align="center" vertical>
    <NH1>你好{{ store.base.world }}</NH1>
    <router-view v-slot="{ Component }">
      <AnimationTrans mode="out-in">
        <component :is="Component" />
      </AnimationTrans>
    </router-view>

    <NoFocusButton @click="toName(home)">第一页</NoFocusButton>
    <NoFocusButton @click="toName(second1)">第一部分</NoFocusButton>
    <NoFocusButton @click="toName(second2)">第二部分</NoFocusButton>
  </NSpace>
</template>

<style scoped></style>
